<template>
    <el-dialog
            title="选择导航主题"
            width="800px"
            top="15px"
            :visible.sync="selNavThemeWin"
            :before-close="handleClose" :append-to-body="true" >
        <el-tabs @tab-click="handleClick" v-model="curGridMode">
            <el-tab-pane label="标准排列" name="normal">
                <el-row :gutter="20">
                    <el-col :span="6" v-for="n in NORMALS" :key="n">
                        <div class="nav-theme-win-item fa fa-check" @click="select(n)"
                             :class="{ 'selected': sourceNav.theme === n, 'active': theme === n }">
                            <img :src="'/assets/imgs/navtheme/' + n + '.jpg'" />
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="混合排列" name="mix">
                <el-row :gutter="20">
                    <el-col :span="6" v-for="m in MIXS" :key="m">
                        <div class="nav-theme-win-item" @click="select(m)"
                             :class="{ 'selected': sourceNav.theme === m, 'active': theme === m }">
                            <img :src="'/assets/imgs/navtheme/' + m + '.jpg'" />
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>

        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="ok()">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>

    import { mapState, mapActions } from 'vuex';
    import _ from 'lodash';

    export default {
        props: [],
        data() {
            return {
                curGridMode: 'normal', // normal, mix
                gridMode: 'normal',
                theme: '',
                sourceNav: {
                    gridMode: '', // normal, mix
                    theme: '',
                },
                NORMALS: [ 'n1', 'n2', 'n3', 'n4', 'n5', 'n6', 'n7', 'n8', 'n9', 'n10', 'n11', 'n12' ],
                MIXS: [ 'm1', 'm2', 'm3', 'm4', 'm5', 'm6' ]
                // selected: null
            };
        },
        computed: {
            ...mapState([
                'selNavThemeWin',
                'selNavThemeWinConfig',
            ]),
        },
        components: {

        },
        methods: {
            ...mapActions([
                'hideSelNavThemeWin'
            ]),
            ok() {

                if(this.gridMode && this.theme && typeof this.selNavThemeWinConfig.success == 'function') {

                    this.selNavThemeWinConfig.success({
                        gridMode: this.gridMode,
                        theme: this.theme,
                    });
                    this.hideSelNavThemeWin()
                } else {
                    this.$message('请选择导航主题！');
                }
            },
            select(theme) {
                this.gridMode = this.curGridMode;
                this.theme = theme;
            },
            cancel: function(){
                this.hideSelNavThemeWin()
            },
            handleClose: function () {
                this.hideSelNavThemeWin()
            },
            handleClick() {},
        },
        watch: {
            selNavThemeWin: function (val) {
                if(val) {
                    let gridMode = _.get(this.selNavThemeWinConfig, 'sourceNav.gridMode');
                    let theme = _.get(this.selNavThemeWinConfig, 'sourceNav.theme');

                    this.gridMode = gridMode;
                    // this.theme = theme;

                    this.sourceNav = {
                        gridMode,
                        theme
                    }
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .source-page-item-selected {
        background: #EEE;
    }
    .nav-theme-win-item{
        height:140px;
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border: 2px solid transparent;
        cursor: pointer;
        padding: 5px;
        margin-bottom: 10px;

        &:before {
            display: none;
            position: absolute;
            right: 0;
            bottom: 0;
            background: #666;
            color: #FFF;
            width:20px;
            height:20px;
            line-height:20px;
            text-align: center;
        }

        &.selected {
            border-color: #DDD;

            &:before {
                display: block;
                background-color: #DDD;
            }
        }

        &:hover {
            border-color: #CCC;
        }
        &.active {
            border-color: #666;
            &:before {
                display: block;
                background-color: #666;
            }
        }

        img {
            max-width:100%;
        }
    }
</style>
